<script setup lang="ts">
import LiuUserInfo from '@/components/LiuUserInfo.vue'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()

import {
  useMessage,
  NDataTable,
  NFlex,
  NPagination,
  type DataTableColumn,
  NSpace,
  NButton,
  NModal,
  NInput,
  NForm,
  NFormItem,
} from 'naive-ui'
import { h, onMounted, ref } from 'vue'
import type { TbMessageJoin, TbMessageReport } from '@/types/admin/System'
import { BaseDataResult, PageBean, PageVO, type BaseResult } from '@/types/BaseResult'
import type { TbMessage } from '@/types/messageapi'

const loading = ref(false)
const firstLoad = ref(true)
const route = useRoute()

const message = useMessage()

const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const page2 = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const list = ref([] as TbMessageJoin[])
const list2 = ref([] as TbMessageReport[])
const queryInfo = ref({ title: '', info: '' })
const queryInfo2 = ref({ info: '' })

const query = () => {
  loading.value = true
  Api.get(
    `/admin/message/${page.value.pageSize}/${page.value.pageNumber}`,
    queryInfo.value,
    (data: BaseDataResult<PageVO<TbMessageJoin>>) => {
      loading.value = false
      if (data.success) {
        list.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

const requery = () => {
  queryInfo.value = { title: '', info: '' }
  page.value.pageNumber = 1
  list.value = []
  query()
}

const columns = [
  { title: '标题', key: 'title' },
  {
    title: '删除理由',
    key: 'reason',
  },
  {
    title: '发布时间',
    key: 'lastupdate',
    render: (row) => {
      return Tools.formatDate(row.lastupdate)
    },
  },
  { title: '状态', key: 'deleted' },
  {
    title: '操作',
    key: 'action',
    render(row) {
      return h(NSpace, {}, [
        h(
          NButton,
          {
            size: 'small',
            type: 'info',
            onClick: () => {
              toDetail(row.mid)
            },
          },
          '查看帖子',
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            onClick: () => {
              showReport(row.mid)
            },
          },
          '查看举报原因',
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            onClick: () => {
              shanchu(row.mid)
            },
          },
          '删除',
        ),
      ])
    },
  },
] as Array<DataTableColumn<TbMessage>>

const columns2 = [
  { title: '举报原因', key: 'info' },
  { title: '举报时间', key: 'created' },
] as Array<DataTableColumn<TbMessageReport>>

const toDetail = (mid: number) => {
  router.push(`/message/${mid}`)
}

const qwe = ref(false)

const showReport = (mid: number) => {
  Api.get(
    `/admin/message/${mid}/${page.value.pageSize}/${page.value.pageNumber}`,
    {},
    (data: BaseDataResult<PageVO<TbMessageReport>>) => {
      if (data.success) {
        list2.value = data.data.list
        page2.value = data.data.pageBean
        qwe.value = true
        return
      }
      message.error(data.message)
    },
  )
  qwe.value = true
}

const rty = ref(false)
const content = ref('')
const delMid = ref(0)

const shanchu = (mid: number) => {
  content.value = ''
  delMid.value = mid
  rty.value = true
}

const deleteReply = () => {
  Api.delete('/admin/message', { mid: delMid.value, reason: content.value }, (data: BaseResult) => {
    if (data.success) {
      rty.value = false
      message.success(data.message)
    }
  })
}

onMounted(() => {
  requery()
})
</script>

<template>
  <div class="p-10">
    <NDataTable :loading="loading" :columns="columns" :data="list"></NDataTable>
  </div>
  <div class="p-4">
    <NFlex justify="center">
      <NPagination
        v-model:page="page.pageNumber"
        :page-size="page.pageSize"
        :item-count="page.total"
        @update:page="query"
      ></NPagination>
    </NFlex>
  </div>

  <div>
    <NModal v-model:show="qwe" preset="dialog" title="帖子举报原因">
      <NDataTable :data="list2" v-model:value="list2" :columns="columns2"></NDataTable>
    </NModal>
  </div>

  <div>
    <NModal v-model:show="rty" preset="dialog" title="帖子删除">
      <NForm>
        <NFormItem>
          <NInput type="textarea" v-model:value="content"></NInput>
        </NFormItem>
      </NForm>
      <template #action>
        <NSpace>
          <NButton type="primary" @click="deleteReply">删除</NButton>
        </NSpace>
      </template>
    </NModal>
  </div>
</template>

<style scoped></style>
